<template>
	<view>
		<!-- <view class="padding-30 " style=""> -->
		<image @click="goBack()" class="fixed"
			style="width: 36rpx;height: 36rpx;top: 30rpx;left: 30rpx;display: block; z-index: 999999;"
			src="../../static/img/back.png"></image>
		<!-- </view> -->

		<view class="myVideo" v-html="videoCon">
			<!-- <video id="myVideo" @play="onPlay()"  autoplay :enable-play-gesture='enable' :play-btn-position='position'  :controls='controls'  :src="info.video"></video> -->
		</view>

		<view class="fixed padding-30" style="right: 0;bottom: 30rpx;z-index: 999999;">
			<view @tap="focus()" class="flex align-center flex-direction margin-bottom-48">
				<image :src="info.avatar" style="border-radius: 100%; width: 100rpx;height: 100rpx;"></image>
				<image v-if="info.is_interest == 0" src="../../static/img/focus.png"
					style="width: 26rpx;height: 26rpx;margin-top: -16rpx;"></image>
			</view>
			<view @tap="toCollect()" class="flex align-center flex-direction margin-bottom-30">
				<image style="width: 60rpx;height: 60rpx;"
					:src="info.is_collect == 1?'../../static/img/sc_on.png':'../../static/img/sc.png' "></image>
				<text class="fs-24 color-fff opacity7">{{info.collect}}</text>
			</view>
			<view @tap="$refs.comment.open()" class="flex align-center flex-direction margin-bottom-30">
				<image style="width: 60rpx;height: 60rpx;" src="../../static/img/comment.png"></image>
				<text class="fs-24 color-fff opacity7" v-if="comment.length > 0">{{comment.length}}</text>
				<text class="fs-24 color-fff opacity7" v-else>暂无</text>
			</view>
			<view @tap="toZan()" class="flex align-center flex-direction margin-bottom-30">
				<image style="width: 60rpx;height: 60rpx;"
					:src="info.is_like == 1?'../../static/img/zan_on.png':'../../static/img/zan.png' "></image>
				<text class="fs-24 color-fff opacity7">{{info.likes}}</text>
			</view>
			<view @click="$refs.sharCon.open()" class="flex align-center flex-direction margin-bottom-30">
				<image style="width: 60rpx;height: 60rpx;" src="../../static/img/shar.png"></image>
				<text class="fs-24 color-fff opacity7">{{info.replay}}</text>
			</view>
		</view>


		<!-- 分享 -->
		<uni-popup ref="sharCon" type="bottom">
			<view class="bg-fff radius-top30 padding-y-40">
				<view class="flex align-center padding-x-30 text-center padding-bottom-36 solid-bottom">
					<view class="margin-right-60" @tap.stop="shar('wx')">
						<image src="../../static/img/chat.png" style="width: 76rpx;height: 76rpx;"></image>
						<view class="fs-28 color-333 margin-top-10">微信好友</view>
					</view>
					<view class="margin-right-60" @tap.stop="shar('pengyou')">
						<image src="../../static/img/pengyou.png" style="width: 76rpx;height: 76rpx;"></image>
						<view class="fs-28 color-333 margin-top-10">朋友圈</view>
					</view>
					<view class="margin-right-60" @tap.stop="shar('bendi')">
						<image src="../../static/img/download.png" style="width: 76rpx;height: 76rpx;"></image>
						<view class="fs-28 color-333 margin-top-10">保存本地</view>
					</view>
				</view>
				<view class="padding-x-100 margin-top-40" v-if="sharType == 'wx' || sharType == 'pengyou'">
					<view style="background: #efefef;color: #999;" class="public_btn w100" v-if="!downloadStatus">下载中
					</view>
					<view @tap="sharVideo()" class="public_btn w100" style="background: #1e8b13;" v-else>
						发送视频{{sharType == 'wx' ?'给好友':'到朋友圈'}}</view>
				</view>
			</view>
		</uni-popup>
		<!-- 分享end -->


		<!-- 评论 -->
		<uni-popup ref="comment" type="bottom">
			<view class="bg-fff radius-top30 ">
				<view class="fs-32 color-333 padding-y-36 text-center fw-600" v-if="comment.length > 0">
					{{comment.length}}条评论</view>
				<view class="fs-32 color-333 padding-y-36 text-center fw-600" v-else>暂无评论</view>
				<!-- <view class="padding-bottom-120" > -->
				<scroll-view scroll-y="true" style="height: 56vh;margin-bottom: 120rpx;">
					<view class="padding-y-30 padding-x-30" v-for="(item,index) in comment" :key='index'>
						<view class="flex align-center justify-between">
							<view class="flex align-center">
								<image style="width: 90rpx;height: 90rpx;border-radius: 100%;" :src="item.avatar">
								</image>
								<view class="margin-left-16">
									<view class="fs-26 color-666">{{item.name}}</view>
									<view class="fs-28 color-333 margin-top-10">{{item.content}}</view>
								</view>
							</view>
							<view @tap="zanPl(item.id,item.is_like )" class="flex align-center flex-direction">
								<image style="width: 46rpx;height: 46rpx;"
									:src="item.is_like == 1 ?'../../static/img/pl_con_on.png':'../../static/img/pl_col.png'">
								</image>
								<text class="fs-26 color-666">{{item.likes}}</text>
							</view>
						</view>
						<view style="margin-left: 110rpx;" class="fs-26 color-666 margin-top-20">
							<text>{{item.time}}</text>
							<text @click="toReply(item.id)" class="margin-left-40">回复</text>
						</view>
						<!-- 评论回复 -->
						<view v-for="(item2,index2) in item.reply" :key='index2' class="margin-top-30"
							style="margin-left: 110rpx;">
							<view class="flex  justify-between">
								<view class="flex align-center">
									<image style="width: 60rpx;height: 60rpx;border-radius: 100%;" :src="item2.avatar">
									</image>
									<view class="margin-left-16">
										<view class="fs-26 color-666">{{item2.name}}</view>
									</view>
								</view>
								<view @tap="zanPl(item2.id,item2.is_like )"
									class="margin-top-24 flex align-center flex-direction">
									<image style="width: 40rpx;height: 40rpx;"
										:src="item2.is_like == 1 ?'../../static/img/pl_con_on.png':'../../static/img/pl_col.png'">
									</image>
									<text class="fs-24 color-666">{{item2.likes}}</text>
								</view>
							</view>
							<view style="margin-left: 80rpx;margin-top: -20rpx;" class="fs-26 color-333">
								{{item2.content}}</view>
							<view style="margin-left: 80rpx;" class="fs-26 color-666 margin-top-20">
								<text>{{item2.time}}</text>
								<text @click="toReply(item.id)" class="margin-left-40">回复</text>
							</view>
						</view>
						<!-- 评论回复end -->
					</view>
				</scroll-view>


				<!-- </view> -->


				<view class="box_shadow w100 padding-x-30 padding-y-20 fixed bg-fff" style="bottom: 0;">
					<input @confirm="toComment()" :focus='focusStatus' v-model="subInfo.content" type="text"
						class="fs-28 padding-x-24 color-666 ipt radius48" placeholder="请输入...">
				</view>
			</view>
		</uni-popup>
		<!-- 评论end -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				enable: true,
				position: 'center',
				controls: false,
				video_id: '',
				info: {},
				videoContext: {},
				comment: [],
				subInfo: {
					pid: 0,
					content: '',
					video_id: ''
				},
				focusStatus: false,
				videoCon: '',
				sharType: '',
				downloadStatus: false
			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onLoad(opt) {
			this.video_id = opt.id;
			this.subInfo.video_id = opt.id;
			this.getInfo()
			this.getComment()
		},
		methods: {
			getInfo() {
				this.$api.video_detail({
					video_id: this.video_id
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data;
						this.videoCon =
							`<video  style="width:100%;height:100%"  id="myVideo" @play="onPlay()"  autoplay enable-play-gesture="${this.enable}" play-btn-position="${this.position}"  controls="${this.controls}"  src="${this.info.video}"></video>`
						this.onPlay()
					}
				})
			},
			getComment() {
				this.$api.comment_video({
					video_id: this.video_id
				}).then(res => {
					if (res.code == 1) {
						this.comment = res.data.data
					}
				})
			},

			// 开始播放
			onPlay() {
				this.$api.like_video({
					video_id: this.video_id,
					type: 3
				}).then(res => {
					if (res.code == 1) {}
				})
			},

			// 发表评论
			toReply(id) {
				this.subInfo.pid = id;
				if (!this.focusStatus) {
					this.focusStatus = true;
				}
			},
			toComment() {
				if (!this.subInfo.content) {
					this.$msg('请填写评论内容');
					return
				}
				this.$api.to_comment_video(this.subInfo).then(res => {
					if (res.code == 1) {
						this.subInfo.content = '';
						this.getComment()
					}
				})
			},



			focus() {
				if (this.info.is_interest == 0) {
					// 关注他人
					this.$api.interest_member({
						member_id: this.info.member_id
					}).then(res => {
						if (res.code == 1) {
							this.info.is_interest = 1
						}
					})
				} else {
					// 取消关注
					this.$api.cancel_interest({
						member_id: this.info.member_id
					}).then(res => {
						if (res.code == 1) {
							this.info.is_interest = 0
						}
					})
				}
			},

			// 收藏视频
			toCollect() {
				var that = this;
				if (this.info.is_collect == 0) {
					// 收藏
					this.$api.like_video({
						video_id: this.video_id,
						type: 2
					}).then(res => {
						if (res.code == 1) {
							this.info.is_collect = 1;
							that.$api.video_detail({
								video_id: that.video_id
							}).then(res => {
								if (res.code == 1) {
									that.info.collect = res.data.collect
								}
							})
						}
					})
				} else {
					// 取消收藏
					this.$api.cancel_like({
						video_id: this.video_id,
						type: 2
					}).then(res => {
						if (res.code == 1) {
							this.info.is_collect = 0;
							that.$api.video_detail({
								video_id: that.video_id
							}).then(res => {
								if (res.code == 1) {
									that.info.collect = res.data.collect
								}
							})
						}
					})
				}
			},

			// 点赞视频
			toZan() {
				var that = this;
				if (this.info.is_like == 0) {
					// 收藏
					this.$api.like_video({
						video_id: this.video_id,
						type: 1
					}).then(res => {
						if (res.code == 1) {
							this.info.is_like = 1;
							that.$api.video_detail({
								video_id: that.video_id
							}).then(res => {
								if (res.code == 1) {
									that.info.likes = res.data.likes
								}
							})
						}
					})
				} else {
					// 取消收藏
					this.$api.cancel_like({
						video_id: this.video_id,
						type: 1
					}).then(res => {
						if (res.code == 1) {
							this.info.is_like = 0;
							that.$api.video_detail({
								video_id: that.video_id
							}).then(res => {
								if (res.code == 1) {
									that.info.likes = res.data.likes
								}
							})
						}
					})
				}
			},

			// 评论点赞
			zanPl(id, like) {
				var that = this;
				if (like == 0) {
					// 收藏
					this.$api.like_comment({
						comment_id: id
					}).then(res => {
						if (res.code == 1) {
							that.getComment()
						}
					})
				} else {
					// 取消收藏
					this.$api.cancel_comment_like({
						comment_id: id
					}).then(res => {
						if (res.code == 1) {
							that.getComment()
						}
					})
				}
			},

			shar(type) {
				var that = this;
				this.sharType = type;
				uni.downloadFile({
					url: that.info.video,
					success: (res) => {
						if (res.statusCode == 200) {
							that.$api.like_video({video_id: that.video_id,type: 4}).then(res => {})
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: (res) => {
									that.downloadStatus = true
								}
							})
							if (that.sharType == 'bendi') {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath, 
									success: function(res) {
										console.log('下载成功')
										that.$msg('保存成功')
									},
									fail: () => {
										if (that.sharType == 'bendi') {
											that.$msg('保存失败')
										}
									}
								});
							}
							
						}
					}
				})
			},

			sharVideo() {
				var that = this;
				if (this.sharType == 'wx') {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 4,
						title:that.info.title,
						mediaUrl: that.info.video,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else {
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 4,
						mediaUrl: that.info.video,
						title:that.info.title,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}
			}


		}
	}
</script>

<style lang="scss" scoped>
	.myVideo {
		width: 100%;
		height: 100vh;

		video {
			width: 100%;
			height: 100%;
		}
	}

	.ipt {
		height: 68rpx;
		background: rgba(153, 153, 153, 0.05);
	}

	/deep/ .uni-popup {
		z-index: 99999999;
	}
</style>
